<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-自定义组件的v-model</title>
</head>
<body>
  <div id="app">
    <base-checkbox v-model="lovingVue"></base-checkbox>
  </div>
</body>
<script src="./vue1111.js"></script>
<script>
  Vue.component('base-checkbox',{
      model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      checked: Boolean
    },
    template: `
      <input
        type="checkbox"
        v-bind:checked="checked"
        v-on:change="$emit('change', $event.target.checked)"
      >
    `
  })
  new Vue({
    el:'#app'
  })
</script>
</html>